<template>
  <div class="app-container">
    <h2>「 {{ title }} 」</h2>
    <el-tabs v-model="tabValue">
      <el-tab-pane label="概览" name="overview">
        <Overview ref="overview" @propReviewUser="propReviewUser" @setTitle="setTitle" />
      </el-tab-pane>
      <el-tab-pane label="任务" name="task">
        <Tasks v-if="tabValue === 'task'" :head="head" />
      </el-tab-pane>
      <el-tab-pane label="需求" name="demand">
        <Demands v-if="tabValue === 'demand'" />
      </el-tab-pane>
      <el-tab-pane label="缺陷" name="defect">
        <Defects v-if="tabValue === 'defect'" />
      </el-tab-pane>
      <el-tab-pane label="版本管理" name="version">
        <Version v-if="tabValue === 'version'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Overview from './components/overview'
import Tasks from './components/tasks'
import Demands from './components/demands'
import Defects from './components/defects'
import Version from './components/version'

export default {
  name: 'ProjectDetail',
  components: {
    Overview,
    Tasks,
    Demands,
    Defects,
    Version
  },
  data() {
    return {
      tabValue: 'overview',
      title: '',
      head: {}
    }
  },
  methods: {
    propReviewUser(head) {
      this.head = head
    },
    setTitle(val) {
      this.title = val
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin: 1rem 0;
}
</style>
